<template>
  <div>
    <a-card :bordered="false" :body-style="{marginBottom: '20px'}">
      <!-- 区域一 -->
      <a-form :form="form">
        <h4 class="form-title"><b>基本信息</b></h4>
        <!-- 第一行 -->
        <a-row :gutter="24" :style="{ marginBottom: '16px' }">
          <a-col :span="8">
            <label class="labeltitle">主机名称:</label> 
            <span class="item-content">{{ this.$route.query.node }}</span>
          </a-col>
          <a-col :span="8">
            <label class="labeltitle">主机地址:</label> 
            <span class="item-content">{{ this.$route.query.node_alias }}</span>
          </a-col>
          <a-col :span="8">
            <label class="labeltitle">业务应用:</label> 
            <span class="item-content">{{ this.$route.query.app_name }}</span>
          </a-col>
        </a-row>
        <a-row :gutter="24" :style="{ marginBottom: '16px' }">
          <a-col :span="8">
            <label class="labeltitle">所属区域:</label> 
            <span class="item-content">{{ this.$route.query.sys_zone }}</span>
          </a-col>
          <a-col :span="8">
            <label class="labeltitle">数据中心:</label> 
            <span class="item-content">{{ this.$route.query.location }}</span>
          </a-col>
          <a-col :span="8">
            <label class="labeltitle">运行状态:</label> 
            <span class="item-content">
              <a-badge status="success" text="正常" v-if="this.$route.query.status === '0'"/>
              <a-badge status="warning" text="不正常" v-if="this.$route.query.status === '1'"/>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <div
            :style="{ float: 'right', overflow: 'hidden', marginRight: '25px' }"
          >
            <a-button type="primary" class="btn-rt10" @click="refresh(true)">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset()">重置</a-button>
          </div>
          <a-col :lg="8" :md="12" :sm="24" style="float:right">
            <a-form-item label="时间周期">
              <a-range-picker
                :show-time="{ format: 'HH:mm:ss' }"
                :ranges="datePicker.ranges"
                format="YYYY-MM-DD HH:mm:ss"
                :placeholder="['选择开始时间', '选择结束时间']"
                :default-value="defaultCreateDateValue"
                v-model="defaultCreateDateValue"
                style="width: 100%"
                @change="onChangeDate"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 分割线 -->
    <!--
    <a-card
      :bordered="false"
      :style="{ marginBottom: '20px'}"
      size="default" 
      title="告警事件列表"> 
      <a slot="extra" href="#" @click="moreSwitch(1)">
        {{ isActive ? '收起' : '更多' }}
        <a-icon :type="isActive ? 'up' : 'down'" />
      </a>
      <a-spin :spinning="loading" v-if="isActive">
        <a-table
          row-key=""
          size="default"
          :columns="alarmListColumns"
          :dataSource="alarmListData"
          :pagination="{ pageSize: 2 }"
        >
        </a-table>
      </a-spin>
    </a-card>
    -->

    <!-- 分割线 -->
    <a-card
      :bordered="false"
      size="default" 
      title="关键性能指标">
      <!--
      <a slot="extra" href="#" @click="moreSwitch(2)">
        {{ isXActive ? '收起' : '更多' }}
        <a-icon :type="isXActive ? 'up' : 'down'" />
      </a>
      -->
      <div slot="extra">
      </div>
      <a-spin :spinning="loading" v-if="isXActive">
        <a-row :gutter="24">
          <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
            <cpu-busy :startTime="startTime" :endTime="endTime"></cpu-busy>
          </a-col>
          <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
            <mem-usage :startTime="startTime" :endTime="endTime"></mem-usage>
          </a-col>
          <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
            <disk-read-rate :startTime="startTime" :endTime="endTime"></disk-read-rate>
          </a-col>
          <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
            <disk-write-rate :startTime="startTime" :endTime="endTime"></disk-write-rate>
          </a-col>
          <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
            <net-if-in :startTime="startTime" :endTime="endTime"></net-if-in>
          </a-col>   
          <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
            <net-if-out :startTime="startTime" :endTime="endTime"></net-if-out>
          </a-col>   
        </a-row>
      </a-spin>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import CpuBusy from './modules/cpuBusy'
import MemUsage from './modules/memUsage'
import NetIfIn from './modules/netIfIn'
import NetIfOut from './modules/netIfOut'
import DiskReadRate from './modules/diskReadRate'
import DiskWriteRate from './modules/diskWriteRate'
import { executeBySqlCmd } from '@/api/objectserver'

export default {
  name: 'HostList',

  components: {
    CpuBusy,
    MemUsage,
    NetIfIn,
    NetIfOut,
    DiskReadRate,
    DiskWriteRate
  },

  data () {
    return {
      loading: false,
      visible: false,
      confirmLoading: false,
      scrollx: 1600,

      // 默认展开
      isActive: true,
      isXActive: true,

      // 页面菜单权限
      routerPermission: {}, 

      // 表数据
      data: [],

      alarmListColumns: [
        {
          title: '设备名称',
          dataIndex: 'node',
          scopedSlots: { customRender: 'node' },
          width: 200
        }, {
          title: '设备地址',
          dataIndex: 'node_alias',
          width: 150
        }, {
          title: '告警内容',
          dataIndex: 'summary',
          scopedSlots: { customRender: 'summary' },
          width: 400
        }, {
          title: '告警次数',
          dataIndex: 'tally',
          width: 100
        }, {
          title: '首次发生时间',
          dataIndex: 'first_occurrence',
          width: 200
        }, {
          title: '最近发生时间',
          dataIndex: 'last_occurrence',
          width: 200
        }, {
          title: '业务应用',
          dataIndex: 'app_name',
          width: 150
        }, {
          title: '机房位置',
          dataIndex: 'location',
          width: 100
        }, {
          title: '工单编号',
          dataIndex: 'bmc_identifier',
          width: 200,
          scopedSlots: { customRender: 'worksheet' }
        }
      ],

      alarmListData: [],

      datePicker: {
        ranges: {
          '15分钟': [moment().subtract(15, 'minute'), moment()],
          '1个小时': [moment().subtract(1, 'hour'), moment()],
          当天: [moment().startOf('day'), moment()],
          '3天前': [moment().subtract(3, 'day'), moment()],
          本周: [moment().subtract(1, 'week'), moment()],
          本月: [moment().startOf('month'), moment()],
          最近3个月: [moment().subtract(3, 'month'), moment()],
          最近半年: [moment().subtract(6, 'month'), moment()]
        },
        // 默认选择7天
        // date: [moment().subtract(7, 'day'), moment()]
        date: [moment().subtract(3, 'month'), moment()],
        // 选择的时间名称
        name: ''
      },
      startTime: '',
      endTime: '',
      defaultCreateDateValue: [moment(new Date()).add(-1, 'days').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')]
    }
  },

  created () {
  },
  
  // 加载数据
  mounted () {
    // 测试用: 模拟静态数据
    // this.getEventList()

    // 生产用: 发起API请求
    // this.getCriticalEvents()
  },

  methods: {
    onChangeDate (value, dateString) {
      this.startTime = dateString[0]
      this.endTime = dateString[1]
      console.log('选择日期: ', value, dateString)
      console.log(this.startTime, this.endTime)
    },

    reset () {
      this.queryParam = {}
      this.defaultCreateDateValue = [] // 默认日期时间
      this.startTime = '' // 查询开始时间
      this.endTime = '' // 查询结束时间
    },

    // 更多效果
    moreSwitch (Num) {
      if (Num === 1) {
        this.isActive = !this.isActive
      } else {
        this.isXActive = !this.isXActive
      }
    },

    // 测试用
    getEventList () {
      this.alarmListData = [
        { 
          id: 1, 
          node: 'S5720-BMC-101', 
          node_alias: '10.20.240.4',
          summary: 'Network interface link down',
          tally: '1',
          first_occurrence: '2021-03-10 12:20:33',
          last_occurrence: '2021-04-08 17:20:33',
          app_name: '视频云',
          location: '事务局',
          bmc_identifier: '100000001'
        }
      ]
      this.loading = false
    },

    // 生产用
    async getCriticalEvents () {
      this.events = await this.getEventsBySql()
      const _this = this // 否则foreach内提示异常
      
      this.events.forEach(function (item) {
        var firstTime = new Date(item.FirstOccurrence * 1000)
        var lastTime = new Date(item.LastOccurrence * 1000)

        _this.alarmListData.push({
          node: item.Node, 
          node_alias: item.NodeAlias,
          summary: item.Summary,
          tally: item.Tally,
          first_occurrence: firstTime.toLocaleString(),
          last_occurrence: lastTime.toLocaleString(),
          app_name: item.app_name,
          location: item.Location,
          bmc_identifier: item.bmc_identifier
        })
      })

      this.loading = false
    },

    getEventsBySql () {
      const params = {
        sqlcmd: "select Node, NodeAlias, Summary, Tally, FirstOccurrence, LastOccurrence, app_name, Location, bmc_identifier from alerts.status where Node='" + this.$route.query.node + "' order by LastOccurrence desc"
      }
      return new Promise((resolve, reject) => {
        executeBySqlCmd(params).then(
          (res) => {
            resolve(res)
          },
          (error) => {
            console.log(error)
            resolve(error)
          }
        )
      })
    }
  }
}
</script>

<style>
.ant-card-body {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 20px !important;
}
.antd-pro-components-standard-form-row-index-label > span {
  width: 150px;
  height: auto !important;
  border-right: 3px solid #1890ff;
  background: #e6f7ff;
}
</style>

<style lang="less" scoped>
.form-title {
  color: rgba(0,0,0,.85);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 20px;
}
.labeltitle{
  margin-right: 10px;
}
.item-content{
  color: #999;
}
.table-operator{
  margin-bottom:10px;
}
/deep/ .ant-card-head{
  padding: 0 20px;
}
.table-page-search-wrapper .ant-form-inline .ant-form-item{
  margin-bottom: 20px;
}
.ant-pro-components-tag-select {
  /deep/ .ant-pro-tag-select .ant-tag {
    margin-right: 24px;
    padding: 0 8px;
    font-size: 14px;
  }
}
.ant-pro-pages-list-projects-cardList {
  margin-top: 24px;

  /deep/ .ant-card-meta-title {
    margin-bottom: 4px;
  }

  /deep/ .ant-card-meta-description {
    height: 44px;
    overflow: hidden;
    line-height: 22px;
  }

  .cardItemContent {
    display: flex;
    height: 20px;
    margin-top: 16px;
    margin-bottom: -4px;
    line-height: 20px;

    > span {
      flex: 1 1;
      color: rgba(0, 0, 0, 0.45);
      font-size: 12px;
    }

    /deep/ .ant-pro-avatar-list {
      flex: 0 1 auto;
    }
  }
}
</style>

<style lang="less" scoped>
.checkable{
  margin-bottom: 10px;
  padding:5px 0;
  border-bottom: 1px dashed #e8e8e8;
  >span{
    float: left;
    padding-right: 5px;
    width: 100px;
    color: #888;
    height: auto !important;
  }
  .checkable-right{
    margin-left: 100px;
    .ant-tag-checkable{
      color: #333;
    }
    .ant-tag-checkable-checked{
      color: #fff;
    }
  }
}
.search-btn-handle{
  .table-page-search-submitButtons{
    float: right;
  }
}
.ant-table-default {
  background: #f00 !important;
  .ant-table-content {
    .ant-table-thead > tr > th > {
      padding: 10px 16px;
    }
    .ant-table-tbody > tr > td > {
      padding: 10px 16px;
    }
  }
}
</style>
